<template>
  <div>
    <el-table :data="items" highlight-current-row>
      <el-table-column type="selection" width="55" />

      <el-table-column label="名称" prop="name" sortable>
        <template #default="scope">
          <img class="icon" :src="attrImageSrcForItem(scope.row)" />
          <el-button
            link
            type="primary"
            :title="scope.row.name"
            @click="handleClickItem(scope.row)"
            >{{ scope.row.name }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="修改日期"
        prop="updated_at"
        :formatter="msFormatter"
        sortable
      ></el-table-column>

      <el-table-column label="类型" prop="type" sortable>
        <template #default="scope">
          <span :title="formatTypeDesc(scope.row)">
            {{ formatTypeLabel(scope.row) }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="大小" prop="size" sortable>
        <template #default="scope">
          <span :title="formatSizeLong(scope.row)">
            {{ formatSizeShort(scope.row) }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import TimeJS from "@/js/time.js";
import MHolderJS from "./model_holder";
import FormatJS from "./format";
import GetterJS from "@/js/getter";

function nop() {}

function formatTime(ms) {
  return TimeJS.FormatTime(ms);
}

export default {
  name: "files-list-view-detail",

  computed: {
    items() {
      let vo = this.modelValue;
      let holder = MHolderJS.New(vo);
      return holder.GetItems();
    },

    self() {
      let vo = this.modelValue;
      let holder = MHolderJS.New(vo);
      return holder.GetSelf();
    },
  },

  data() {
    return {};
  },

  methods: {
    // onMounting(action) {
    //   const mode = "detail";
    //   let str = "listview." + action + "(" + mode + ")";
    //   console.log(str);
    // },

    msFormatter(row, column, cellValue, index) {
      nop(row, column, cellValue, index);
      return formatTime(cellValue);
    },

    handleClickItem(item) {
      let action = "open";
      let parent = this.self;
      this.$emit("action", { action, item, parent });
    },

    attrImageSrcForItem(item) {
      let g = GetterJS.NewGetter(item);
      let src = g.Get("type_info.icon", ".", "/image/icons/not_found");
      return src;
    },

    formatTypeLabel(item) {
      let info = item.type_info;
      return info.label + "";
    },

    formatTypeDesc(item) {
      let info = item.type_info;
      let desc = info.description;
      let name = info.type;
      return desc + "(" + name + ")";
    },

    formatSizeShort(item) {
      return FormatJS.FormatFileSizeShort(item);
    },

    formatSizeLong(item) {
      return FormatJS.FormatFileSizeLong(item);
    },
  },

  // mounted() {
  //   this.onMounting("mounted");
  // },

  // unmounted() {
  //   this.onMounting("unmounted");
  // },

  props: {
    modelValue: Object,
  },
};
</script>

<style scoped>
.icon {
  width: 28px;
  height: 28px;
}
</style>
